<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
       <style>
		di v#d1{
			width:50%;
			height:500px;
			/*颜色色值 透明度 遮罩层 左栏*/
			background:rgba(143, 33, 78 ,.1) ;
		}
		/* 最大宽度与最小宽度*/
		div#container{
			background: #f0f0f0;
			
		}
		div.box{
			background:#55ff00 ;
			color:#fff;
			width:80%;
			/*最小宽度：设定，不能改变，移动端*/
			min-height:500px ;
			/*最大宽度，设定*/
			max-width: 600px;
			/*页面设置最大与最小宽高、约定 移动端宽高比。页面错乱
			*/
		}
	   </style>	
	</head>
	<body>
		<div id="d1"></div>
		<!-- 最大宽度与最小宽度：自适应：编写页面在任何浏览器下正常显示-->
		<div id="container">
			<div class="box"></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur unde nam perspiciatis! Obcaecati, modi voluptas! Nam, nulla! Impedit sint earum aspernatur velit, atque nisi tempora, aliquid est id dolore repellendus?
		</div>
	</body>
</html>